<template>
  <div ref="chartRef1" style="width: 100%x;" :style="{height: height}"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
let props = withDefaults(defineProps<{
    height: string
}>(), {
    height: '60vh'
})

// 柱状图1
const chartRef1 = ref(null)
let chartInstance1:any = null
const initChart1 = () => {
  if (chartRef1.value) {
    chartInstance1 = echarts.init(chartRef1.value)
    const option = {
      title: {
        text: '这是一个标题' // 图表标题
      },
      tooltip: {}, // 默认提示框配置
      legend: {
        data: ['销量'], // 图例名称
        bottom: '3%'
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] // X 轴数据
      },
      yAxis: {}, // Y 轴默认配置
      series: [
        {
          name: '销量', // 系列名称
          type: 'bar', // 图表类型为柱状图
          data: [5, 20, 36, 10, 10, 20] // 数据值
        }
      ]
    }
    chartInstance1.setOption(option)
  }
}
const resizeChart = () => {
  chartInstance1?.resize()
}

onMounted(() => {
  initChart1()
  window.addEventListener('resize', resizeChart)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeChart)
  chartInstance1?.dispose() // 销毁 echarts 实例
})
</script>
<style lang="scss" scoped>
</style>
